<template lang="html">
  <div class="order-message">
    <h3 class="clear-fix">
      <span>
        订单号：271398278
      </span>
      <span>
        下单时间：2018-2-09
      </span>
    </h3>
    <div class="order-message-box clear-fix">
      <div class="order-message-top clear-fix">
        <div class="order-message-img">
          <img src="../../assets/img/mine/mine-star_06.png" alt="">
        </div>
        <div class="order-message-text">
          <h4>
            <span>精品红豆薏仁粉</span>
            <span>￥98</span>
          </h4>
          <div class="order-descorp-list">
            <span>大小：盒装；</span>
            <span>包装：盒装</span>
            <span>×1</span>
          </div>
        </div>
      </div>
      <div class="order-message-bottom">
        <span>数量：×1</span>
        <span>价格：￥98</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'OrderMessage'
}
</script>

<style lang="less" scoped>
.order-message{
  padding: 0.25rem 0 0.75rem;
  background-color: #f1f1f1;
  h3 {
    font-weight: 400;
    padding: 0 0.2rem;
    box-sizing: border-box;
    margin-bottom: 0.2rem;
    span{
      &:first-child{
        float: left;
      }
      &:last-child{
        float: right;
      }
    }
  }
  .order-message-box{
    padding: 0.2rem 0.2rem ;
    box-sizing: border-box;
    background-color: #fff;
    .order-message-top{
      .order-message-img{
        float: left;
        width: 1.1rem;
        height: 0.98rem;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .order-message-text{
        float: left;
        margin-left: 0.45rem;
        width: 78%;
        h4 span{
          &:last-child{
            float: right;
          }
        }
        .order-descorp-list{
          font-size: 0.12rem;
          color: #999;
          span{
            &:nth-child(3){
              float: right;
            }
          }
        }
      }

    }
    .order-message-bottom{
      width: 87%;
      text-align: right;
      float: right;
    }
  }
}
</style>
